<script setup lang="ts">
import { ref, computed } from "vue";
import sheep from "@/sheep";
import { onLoad } from "@dcloudio/uni-app";

const listData = ref([
  
]);

// 弹窗状态控制
const showPopup = ref(false);
const currentNotice = ref(null);

// 显示公告详情弹窗
const showNoticeDetail = (notice) => {
  currentNotice.value = notice;
  showPopup.value = true;
};

// 关闭弹窗
const closePopup = () => {
  showPopup.value = false;
};

const editBoxShow = (notice) => {
  notice.editShow = !notice.editShow;
};

const confirmDelete = (notice) => {
  uni.showModal({
    title: "提示",
    content: "是否删除该项？",
    success: (res) => {
      if (res.confirm) {
        sheep.$api.qy_noticelist
          .delete({
            id: notice.id,
          })
          .then((res) => {
            console.log("删除成功", res);
            listData.value.splice(listData.value.indexOf(notice), 1);
          });
      } else if (res.cancel) {
        // 用户点击了取消按钮，不做任何操作
      }
    },
  });
};

// sheep.$store("user").userInfo = {
//         "wx_id": "5",
//         "wx_openId": "ocuTw62_FBWMs99da3PLqaJYk0yQ",
//         "wx_user": "qy-8wESThYY",
//         "wx_pawd": "76555AS@srtgr",
//         "people_id": "162",
//         "wx_type": "1",
//         "wx_nickName": "筷子大虾",
//         "wx_avatarUrl": "http://10.142.7.119/upload/avatarUrl/4.jpg",
//         "wx_sign": "",
//         "wx_phone": "12312312311",
//         "createtime": "2025-02-15 19:34:43",
//         "wx_status": "0",
//         "del_type": "0",
//         "r_id": "162",
//         "company_id": "2",
//         "r_name": "孙浩",
//         "r_number": "2",
//         "r_address": "1",
//         "r_tel": "12312312311",
//         "r_status": "0",
//         "user_id": "2",
//         "updatetime": "2025-02-15 19:38:04"
//     }
get();

function get() {
  const params = {
    wx_type: sheep.$store("user").userInfo.wx_type,
  };
  sheep.$api.qy_noticelist.list(params).then((res) => {
    console.log("listData", res);
    listData.value = res.notice_info;
  });
}
</script>

<template>
  <s-layout>
    <view class="notice-list">
      <view class="notice-title">
        <fui-icon name="notice" :size="36" color="#5289ff"></fui-icon>
        <text class="title-text">最新公告</text>
      </view>
      <view class="notice-items">
        <view v-for="notice in listData" :key="notice.id" class="notice-card" @click="showNoticeDetail(notice)">
          <view class="notice-header">
            <text class="notice-type">{{ notice.n_person }}</text>
            <text class="notice-date">{{ notice.n_date }}</text>
          </view>
          <text class="notice-title-text">{{ notice.n_title }}</text>
          <text class="notice-content">{{ notice.n_content }}</text>
        </view>
      </view>
      
      <!-- 公告详情弹窗 -->
      <view v-if="showPopup" class="notice-popup-overlay" @click.self="closePopup">
        <view class="notice-popup">
          <view class="notice-popup-header">
            <text class="popup-title">公告详情</text>
            <text class="popup-close" @click="closePopup">×</text>
          </view>
          <scroll-view scroll-y class="popup-content">
            <view v-if="currentNotice" class="popup-notice-header">
              <text class="popup-notice-title">{{ currentNotice.n_title }}</text>
              <view class="popup-notice-info">
                <text class="popup-notice-type">{{ currentNotice.n_person }}</text>
                <text class="popup-notice-date">{{ currentNotice.n_date }}</text>
              </view>
              <text class="popup-notice-content">{{ currentNotice.n_content }}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<style lang="scss">
page {
  background-color: #f0f3f8;
  height: 100%;
}
.notice-list {
  margin-top: 10rpx;
  width: 96%;
  margin: 30rpx auto;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(82, 137, 255, 0.08);
  padding: 32rpx;
}

.notice-title {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;

  .title-text {
    font-size: 34rpx;
    color: #1a1a1a;
    font-weight: 600;
    margin-left: 20rpx;
  }
}

.notice-items {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.notice-card {
  background: #fafbff;
  border-radius: 12rpx;
  padding: 24rpx;
  position: relative;
  transition: transform 0.3s ease;

  &.unread {
    background: #fff;
    border-left: 8rpx solid #5289ff;

    &::after {
      content: "";
      position: absolute;
      right: 24rpx;
      top: 24rpx;
      width: 16rpx;
      height: 16rpx;
      background: #ff4757;
      border-radius: 50%;
    }
  }
  .notice-edit {
    position: absolute;
    right: 20rpx;
    .edit-button {
      position: absolute;
      text-align: center;
      top: -90rpx;
      right: 60rpx;
      height: 100rpx;
      width: 150rpx;
      z-index: 2;
      background-color: #ffffffbb;
      .update-button {
        margin: 10rpx;
      }
      .delete-button {
        margin: 10rpx;
      }
    }
  }
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;

  .notice-type {
    font-size: 24rpx;
    color: #5289ff;
    background: rgba(82, 137, 255, 0.1);
    padding: 6rpx 16rpx;
    border-radius: 8rpx;
  }

  .notice-date {
    font-size: 24rpx;
    color: #999;
  }
}

.notice-title-text {
  display: block;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
}

.notice-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

/* 弹窗样式 */
.notice-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notice-popup {
  width: 80%;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.notice-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.popup-close {
  font-size: 48rpx;
  color: #999;
  height: 48rpx;
  width: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  padding: 32rpx;
  flex: 1;
  max-height: 60vh;
}

.popup-notice-header {
  margin-bottom: 24rpx;
}

.popup-notice-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.popup-notice-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.popup-notice-type {
  font-size: 24rpx;
  color: #5289ff;
  background: rgba(82, 137, 255, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
}

.popup-notice-date {
  font-size: 24rpx;
  color: #999;
}

.popup-notice-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
}
</style>
